<script setup lang="ts">
import { ref, reactive } from "vue";
import type { TabsPaneContext } from "element-plus";
import type { FormProps } from "element-plus";
import router from "@/router";
import { loginStore } from "@/stores/login/login";
import { stuLogin } from "@/api/login/login";
import { teachLogin } from "@/api/login/login";
import { setToken } from "@/utils/token";
import type { FormInstance, FormRules } from "element-plus";
import { teacherPhone } from "@/api/login/login";
import { studentPhone } from "@/api/login/login";
import { stuCode } from "@/api/login/login";
import { teaCode } from "@/api/login/login";

const store = loginStore();
const userInfo = store.userInfo;
const haspost = ref(false);
const time = ref(60);

const labelPosition = ref<FormProps["labelPosition"]>("right");

// 用户类型
const userType = ref("1");

const activeName = ref("first");
const checked = ref(true);

// 验证
const ruleFormRef = ref<FormInstance>();
const checkUserName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("用户名不能为空"));
  }
  setTimeout(() => {
    if (value.length < 3) {
      callback(new Error("用户名不能小于3位"));
    }
  }, 1000);
};
const checkPwd = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    if (userInfo.password !== "") {
      // if (!ruleFormRef.value) return;
      // ruleFormRef.value.validateField("password", () => null);
      if (value.length < 3) {
        callback(new Error("密码需要大于三位"));
      }
    }
    // callback();
  }
};
const rules = reactive<FormRules<typeof userInfo>>({
  username: [{ validator: checkUserName, trigger: "blur" }],
  password: [{ validator: checkPwd, trigger: "blur" }],
});

// 登录

const login = () => {
  if (userInfo.type == "1") {
    //选择学生登录
    // console.log("学生");
    // console.log(userInfo);

    stuLogin(userInfo).then((res: any) => {
      if (res.status == 200) {
        if (res.data.msg == "请求成功") {
          setToken("token", res.data.data.token);
          setToken("refreshToken", res.data.data.refreshToken);
          router.push("/Front");
        } else {
          alert("出错啦");
        }
      }
      //   console.log(res);
    });
  } else if (userInfo.type == "2") {
    //选择老师登录
    // console.log("教师");
    teachLogin(userInfo).then((res: any) => {
      if (res.status == 200) {
        if (res.data.msg == "请求成功") {
          setToken("token", res.data.data.token);
          setToken("refreshToken", res.data.data.refreshToken);
          router.push("/BackMain");
        } else {
          alert("出错啦");
        }
      }
    });
  }
};

// 发送验证码
const postCode = () => {
  console.log(userInfo);

  if (userInfo.phone == "") {
    alert("手机号码不能为空");
  } else {
    haspost.value = true;
    let tt = setInterval(() => {
      time.value--;

      if (time.value == 0) {
        haspost.value = false;
        time.value = 60;
        clearInterval(tt);
      }
    }, 1000);
    if (userInfo.type == "1") {
      //学生
      stuCode(userInfo).then((res) => {
        if (res.data.msg == "手机号不存在") {
          alert("手机号不存在");
        }
      });
    } else {
      //老师
      // console.log(userInfo.phone);
      teaCode(userInfo).then((res) => {
        if (res.data.msg == "手机号不存在") {
          alert("手机号不存在");
        }
      });
    }
  }
};

// 验证码登录
const phoneLogin = () => {
  if (userInfo.type == "1") {
    //同学
    studentPhone(userInfo).then((res) => {
      if (res.data.msg == "请求成功") {
        setToken("token", res.data.data.token);
        setToken("refreshToken", res.data.data.refreshToken);
        router.push("/Front");
      } else {
        alert("验证码错误");
      }
    });
  } else {
    //老师
    teacherPhone(userInfo).then((res) => {
      console.log(res);

      if (res.data.msg == "请求成功") {
        setToken("token", res.data.data.token);
        setToken("refreshToken", res.data.data.refreshToken);
        router.push("/BackMain");
      } else {
        alert("验证码错误");
      }
    });
  }
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};
</script>
<template>
  <div class="login">
    <div class="container">
      <div class="box">
        <div>
          <div>登录</div>
          <div id="register" class="fontSmall">还没有账号?<a>立即注册</a></div>
        </div>
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <!-- 账号密码登录 -->
          <el-tab-pane label="账号密码登录" name="first" small>
            <el-form
              :label-position="labelPosition"
              label-width="100px"
              :model="userInfo"
              style="max-width: 460px"
              size="default"
              :rules="rules"
              ref="ruleFormRef"
              status-icon
            >
              <el-form-item prop="username">
                <el-input
                  v-model="userInfo.username"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="userInfo.password"
                  placeholder="请输入密码"
                  type="password"
                />
              </el-form-item>
              <!-- 用户类型 -->
              <div class="my-2 flex items-center text-sm selectType">
                <el-radio-group v-model="userInfo.type" class="ml-4">
                  <el-radio label="1">学生</el-radio>
                  <el-radio label="2">教师</el-radio>
                </el-radio-group>
              </div>
              <div class="selectpwd">
                <el-checkbox v-model="checked" label="记住密码" size="small" />
                <div>忘记密码？</div>
              </div>
              <div class="loginbtn">
                <el-button
                  :plain="true"
                  @click="login"
                  type="primary"
                  id="login"
                  >登录</el-button
                >
              </div>
            </el-form>
          </el-tab-pane>

          <!-- 手机验证码登录 -->
          <el-tab-pane label="手机验证码登录" name="second" small>
            <el-form
              :label-position="labelPosition"
              label-width="100px"
              :model="userInfo"
              style="max-width: 460px"
              size="default"
            >
              <el-form-item>
                <el-input v-model="userInfo.phone" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="userInfo.code"
                  placeholder="验证码"
                  style="width: 130px"
                />
                <template v-if="!haspost">
                  <el-button type="info" round @click="postCode"
                    >发送</el-button
                  >
                </template>
                <template v-if="haspost">
                  <el-button type="info" round>{{ time }}</el-button>
                </template>
              </el-form-item>

              <!-- 用户类型 -->
              <div class="my-2 flex items-center text-sm selectType">
                <el-radio-group v-model="userInfo.type" class="ml-4">
                  <el-radio label="1">学生</el-radio>
                  <el-radio label="2">教师</el-radio>
                </el-radio-group>
              </div>
              <!-- <div class="loginbtn reg">登&nbsp;&nbsp;&nbsp;&nbsp;录</div> -->
              <div class="loginbtn">
                <el-button
                  :plain="true"
                  @click="phoneLogin"
                  type="primary"
                  id="login"
                  >登录</el-button
                >
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="fontSmall">
        登录即同意<a>《在线课堂服务协议》</a>和<a>《在线课堂服务协议》</a>
      </div>
    </div>
  </div>
</template>
<style scoped>
a {
  color: #409eff;
}
.fontSmall {
  font-size: 12px;
}

.login {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/bg.png");
}
.container {
  width: 45%;
  height: 350px;
  /* background-color: red; */
  position: absolute;
  top: calc(50% - 175px);
  right: 10%;
}
.box {
  width: 90%;
  /* height: 320px; */
  padding: 20px;
  border: 1px solid #d4d7de;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 10px;
}
.box > div:first-child {
  display: flex;
  justify-content: space-between;
}

/* 登录方式标签 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* input框 */

.box .el-input {
  width: 250px;
  margin-left: calc(50%-100px);
}

/* 选择记住密码 */
.selectpwd {
  display: flex;
  justify-content: space-around;
}
.selectpwd div {
  font-size: 12px;
}
.selectType {
  width: 40%;
  margin: 5px auto;
}

/* 登录按钮 */
.loginbtn {
  margin-left: 30%;
}
#login {
  width: 100px;
}

/* 手机验证码登录 */
.el-button {
  margin-left: 25px;
}
/* 调整登录按钮 */
.reg {
  margin-top: 30px;
}
</style>
